<template>
  <div class="body">
    <van-nav-bar
      title="大神"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="head">
      <h2>大神新书</h2>
      <div class="tab">
        <div v-for="(item, index) in tab" :key="index">
          <img :src="item.img" alt="" />
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
    <div class="main">
      <h2>白金作家</h2>
      <div class="authorList">
        <div
          class="author-item"
          v-for="(item, index) in countData"
          :key="index"
        >
          <div class="left">
            <img :src="item.image" alt="" />
          </div>
          <div class="right">
            <div>
              {{ item.name }}
              <van-tag type="primary">{{ item.tag }}</van-tag>
            </div>
            <div>{{ item.title }}</div>
          </div>
          <div><van-icon name="arrow" /></div>
        </div>
        <p style="text-align: center" @click="more">加载更多....</p>
      </div>
      <div class="authorList">
        <div
          class="author-item"
          v-for="(item, index) in countData"
          :key="index"
        >
          <div class="left">
            <img :src="item.img" alt="" />
          </div>
          <div class="right">
            <div>
              {{ item.name }}
              <van-tag type="primary">{{ item.tag }}</van-tag>
            </div>
            <div>{{ item.title }}</div>
          </div>
          <div><van-icon name="arrow" /></div>
        </div>
        <p style="text-align: center" @click="more">加载更多....</p>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import axios from 'axios'
export default {
  data() {
    return {
      tab: [],
      authorList: [],
      loading: false,
      page: 5,
    }
  },
  computed: {
    countData() {
      let data = []
      if (this.authorList.length > 5) {
        data = this.authorList.slice(0, this.page)
        return data
      } else {
        data = this.authorList
        return data
      }
    },
  },
  methods: {
    onClickLeft() {
      this.$router.push('/')
    },
    onClickRight() {
      Toast('按钮')
    },
    async getTab() {
      let resp = await axios.get('/api/tab')
      this.tab = resp.data.tab
    },
    more() {
      this.page += 5
    },
    async getAuthorList() {
      let resp = await axios.get('/api/authorList')
      this.authorList = resp.data.authorList
    },
  },
  created() {
    this.getTab()
    this.getAuthorList()
  },
}
</script>
<style lang="scss">
.body {
  width: 100vw;
  height: 100vh;
  .tab {
    width: 100%;
    height: 200px;
    display: flex;
    border: 1px solid #ccc;
    overflow: scroll;
  }
  .authorList {
    width: 95%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin: 10px auto;
    .authorList-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
      justify-content: space-between;
      .left {
        margin: 0 10px;
      }
      .right {
        flex-grow: 1;
      }
      img {
        border-radius: 50%;
      }
    }
  }
}
</style>
